<!-- 后台仪表盘控制主页 -->
<template>
  <div class="container">
    <!-- 左侧导航栏 -->
    <Sidebar />
    <!-- 右侧内容区域 -->
    <div class="content" :style="{'padding-left':getSystemConfig.isCollapse?'64px':'220px'}">
      <div class="content-page">
        <div id="main">
          <Topbar />
          <div class="content-main">
            <router-view />
          </div>
          <div class="footer clearfix">
            <span class="copyright fr">© 2017-2020</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入左侧菜单导航
import Sidebar from "@/components/sidebar";
import Topbar from "@/components/topbar";
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  components: {
    Sidebar,
    Topbar
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  computed: {
    ...mapGetters("system", ["getSystemConfig"])
  }
};
</script>

<style lang="less">
/* @import url(); 引入css类 */
.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // padding-left:220px;
  min-height: 700px;
  overflow: auto;
  // transition: padding-left 0.35s;
  .content-page {
    #main {   
      position: relative;     
      padding-top: 42px;
      padding-bottom: 36px;
      .content-main {
        padding: 15px;
      }
      .footer {
        position: fixed;
        z-index: 66;
        width: 100%;
        bottom: 0;
        border-top: 1px solid #e7eaec;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: #fff;
        padding-right: 80px;
        .copyright {
          font-size: 12px;
        }
      }
    }
  }
}

</style>
